import { Button, Checkbox, message, Modal, Table } from 'antd';
import { Form } from '@ant-design/compatible';
import { connect } from 'dva';
import React, { PureComponent } from 'react';
export default class MerchantAuthModal extends PureComponent {
  state = {
    buttonLoading: false,
    merchantId: '',
    resultData: [],
    listData: [
      {
        sid: 1,
        name: '实时定位',
        enableType: 'realtimePositioning',
        credit_vehicle: 0,
        risk_vehicle: 0,
        overdue_vehicle: 0,
      },
      {
        sid: 2,
        name: '跛行',
        enableType: 'vehicleLimp',
        credit_vehicle: 0,
        risk_vehicle: 0,
        overdue_vehicle: 0,
      },
      {
        sid: 3,
        name: '锁车',
        enableType: 'vehicleLock',
        credit_vehicle: 0,
        risk_vehicle: 0,
        overdue_vehicle: 0,
      },
    ],
    remoteWakeup: 0,
    vehicleAlarm: 0,
    realtimePositioning: 0,
    vehicleLimp: 0,
    vehicleLock: 0,
    isVehicleAlarmDisabled: false,
  };

  componentDidMount() {
    this.props.onRef(this);
  }

  formatData = (data) => {
    const { listData } = this.state;
    // console.log('listData', listData);
    // let remoteWakeup = 0;
    // let vehicleAlarm = 0;
    // let realtimePositioning = 0;
    // let vehicleLimp = 0;
    // let vehicleLock = 0;
    if (!data) return;
    // remoteWakeup = data.remoteWakeup;
    // vehicleAlarm = data.vehicleAlarm;
    // realtimePositioning = data.vehicleAlarm;
    // vehicleLimp = data.vehicleAlarm;
    // vehicleAlarm = data.vehicleAlarm;
    const {
      remoteWakeup = 0,
      vehicleAlarm = 0,
      realtimePositioning = 0,
      vehicleLimp = 0,
      vehicleLock = 0,
    } = data;
    // listData.forEach((d) => {
    //   d.credit_vehicle = data[d.enableType]?.indexOf('1') > -1 ? 1 : 0;
    //   d.risk_vehicle = data[d.enableType]?.indexOf('2') > -1 ? 1 : 0;
    //   d.overdue_vehicle = data[d.enableType]?.indexOf('3') > -1 ? 1 : 0;
    // });
    // console.log(listData);
    this.setState(
      {
        listData,
        remoteWakeup,
        vehicleAlarm,
        realtimePositioning,
        vehicleLimp,
        vehicleLock,
      },
      () => {
        this.handleAutoIviNoticeChecked();
      },
    );
  };

  setStateData = (data) => {
    this.setState({
      ...data,
    });
  };

  ok = () => {
    const { dispatch } = this.props;
    const {
      listData,
      merchantId,
      resultData,
      remoteWakeup,
      vehicleAlarm,
      realtimePositioning,
      vehicleLimp,
      vehicleLock,
    } = this.state;
    // let realtimePositioningArr = this.generateParams(0);
    // let vehicleLimpArr = this.generateParams(1);
    // let vehicleLockArr = this.generateParams(2);
    let req = {
      merchantUuid: merchantId,
      remoteWakeup,
      vehicleAlarm,
      realtimePositioning,
      vehicleLimp,
      vehicleLock,
    };
    // console.log('req', req);
    this.setLoading(true);
    dispatch({
      type: 'common/queryPost',
      payload: {
        url: '/mscreditbusiness/merchants/autorisk',
        ...req,
      },
      callback: (response) => {
        if (response.statusCode === '0') {
          message.success('操作成功');
          this.close();
        } else {
          this.setLoading(false);
          message.error(response.statusMessage);
        }
      },
    });
  };

  generateParams = (idx) => {
    const { listData } = this.state;
    let arr = [];
    !!listData[idx].credit_vehicle && arr.push('1');
    !!listData[idx].risk_vehicle && arr.push('2');
    !!listData[idx].overdue_vehicle && arr.push('3');
    return arr;
  };
  setLoading = (flag) => {
    this.setState({
      buttonLoading: flag,
    });
  };

  close = () => {
    const { closeModal } = this.props;
    this.setState({
      buttonLoading: false,
      resultData: [],
      listData: [
        {
          sid: 1,
          name: '实时定位',
          enableType: 'realtimePositioning',
          credit_vehicle: 0,
          risk_vehicle: 0,
          overdue_vehicle: 0,
        },
        {
          sid: 2,
          name: '跛行',
          enableType: 'vehicleLimp',
          credit_vehicle: 0,
          risk_vehicle: 0,
          overdue_vehicle: 0,
        },
        {
          sid: 3,
          name: '锁车',
          enableType: 'vehicleLock',
          credit_vehicle: 0,
          risk_vehicle: 0,
          overdue_vehicle: 0,
        },
      ],
    });
    closeModal();
  };

  onChangeA = (e, record) => {
    const { listData } = this.state;
    let checked = e.target.checked;
    let list = listData.map((d) => {
      if (d.sid === record.sid) {
        d.credit_vehicle = checked ? 1 : 0;
      }
      return d;
    });
    this.setState({
      listData: list,
    });
  };
  onChangeB = (e, record) => {
    const { listData } = this.state;
    let checked = e.target.checked;
    let list = listData.map((d) => {
      if (d.sid === record.sid) {
        d.risk_vehicle = checked ? 1 : 0;
      }
      return d;
    });
    this.setState({
      listData: list,
    });
  };

  onChangeC = (e, record) => {
    const { listData } = this.state;
    let checked = e.target.checked;
    let list = listData.map((d) => {
      if (d.sid === record.sid) {
        d.overdue_vehicle = checked ? 1 : 0;
      }
      return d;
    });
    this.setState({
      listData: list,
    });
  };

  /**
   * 若已勾选跛行/锁车时，车机告警自动勾选，且不能反选
   */
  handleAutoIviNoticeChecked = () => {
    const { vehicleLimp, vehicleLock } = this.state;
    if (vehicleLimp || vehicleLock) {
      this.setState({
        vehicleAlarm: 1,
      });
    }
    this.setState({
      isVehicleAlarmDisabled: vehicleLimp || vehicleLock,
    });
  };
  renderSimpleForm() {
    const { modalVisible } = this.props;
    const {
      buttonLoading,
      listData,
      remoteWakeup,
      vehicleAlarm,
      realtimePositioning,
      vehicleLimp,
      vehicleLock,
      isVehicleAlarmDisabled,
    } = this.state;
    const footer = (
      <div>
        <Button onClick={this.close} size="small">
          取消
        </Button>
        <Button loading={buttonLoading} onClick={this.ok} size="small" type="primary">
          确定
        </Button>
      </div>
    );
    const columns = [
      {
        title: '车控授权',
        dataIndex: 'name',
      },
      {
        title: '授信车辆',
        dataIndex: 'credit_vehicle',
        render: (text, record) => {
          return <Checkbox onChange={(e) => this.onChangeA(e, record)} checked={text} />;
        },
      },
      {
        title: '预警车辆',
        dataIndex: 'risk_vehicle',
        render: (text, record) => {
          return <Checkbox onChange={(e) => this.onChangeB(e, record)} checked={text} />;
        },
      },
      {
        title: '逾期车辆',
        dataIndex: 'overdue_vehicle',
        render: (text, record) => {
          return <Checkbox onChange={(e) => this.onChangeC(e, record)} checked={text} />;
        },
      },
    ];
    const tableProps = {
      columns,
      rowKey: (record) => record.sid,
      dataSource: listData,
      pagination: false,
    };
    return (
      <Modal
        footer={footer}
        title="给商户授权自动风控规则车控能力"
        visible={modalVisible}
        onCancel={this.close}
        style={{ top: 100 }}
        width={640}
      >
        <Checkbox
          checked={remoteWakeup}
          style={{ marginBottom: '20px', marginLeft: '20px' }}
          onChange={(e) => {
            this.setState({
              remoteWakeup: e.target.checked ? 1 : 0,
            });
          }}
        >
          TBOX远程唤醒
        </Checkbox>
        <Checkbox
          checked={vehicleAlarm}
          style={{ marginBottom: '20px', marginLeft: '20px' }}
          onChange={(e) => {
            this.setState({
              vehicleAlarm: e.target.checked ? 1 : 0,
            });
          }}
          disabled={isVehicleAlarmDisabled}
          onClick={() => {
            if (isVehicleAlarmDisabled) {
              message.info('跛行或锁车时，必须给车机发送告警信息');
            }
          }}
        >
          车机告警
        </Checkbox>
        <Checkbox
          checked={realtimePositioning}
          style={{ marginBottom: '20px', marginLeft: '20px' }}
          onChange={(e) => {
            this.setState({
              realtimePositioning: e.target.checked ? 1 : 0,
            });
          }}
        >
          实时定位
        </Checkbox>
        <Checkbox
          checked={vehicleLimp}
          style={{ marginBottom: '20px', marginLeft: '20px' }}
          onChange={(e) => {
            this.setState(
              {
                vehicleLimp: e.target.checked ? 1 : 0,
              },
              () => {
                this.handleAutoIviNoticeChecked();
              },
            );
          }}
        >
          跛行
        </Checkbox>
        <Checkbox
          checked={vehicleLock}
          style={{ marginBottom: '20px', marginLeft: '20px' }}
          onChange={(e) => {
            this.setState(
              {
                vehicleLock: e.target.checked ? 1 : 0,
              },
              () => {
                this.handleAutoIviNoticeChecked();
              },
            );
          }}
        >
          锁车
        </Checkbox>
        {/* <Table {...tableProps} /> */}
      </Modal>
    );
  }

  render() {
    return this.renderSimpleForm();
  }
}
